<template>
    <div class="main-content">
        <div style="height: 60px;background-color: rgb(red, green, blue)"></div>
        <div style="display: flex;">
            <div class="left"></div>
            <div style="width: 90%;margin-bottom: 50px; background-color:white">
                <div style="color: #FE0137FF;margin: 15px 0 15px 18px;font-weight: bold;font-size: 26px;">主题市场</div>
                <div style="display: flex;margin: 0 25px;">
                    <div style="flex: 2;">
                        <div style="display: flex;color:#666666FF;margin: 14px 0;" v-for="item in typeData">
                            <img style="width: 24px;" :src="item.img" alt="">
                            <div style="margin-left: 10px;font-size: 22px;"><a href="javascript:void(0)"
                                    @click="navGo('/Type?id=' + item.id)">{{ item.name }}</a></div>
                        </div>
                    </div>
                    <div style="flex:5;margin-top: 15px;">
                        <div>
                            <el-carousel height="400px" style="border-radius: 10px;">
                                <el-carousel-item v-for="item in carouselData1">
                                    <img style="width: 100%;height: 400px;border-radius: 10px;" :src="item" alt="">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div style="margin-top: 30px;display: flex;">
                            <div style="flex: 1;">
                                <el-carousel height="300px" style="border-radius: 10px;">
                                    <el-carousel-item v-for="item in carouselData2">
                                        <img style="width: 100%;height: 300px;border-radius: 10px;" :src="item" alt="">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div style="flex: 1;margin-left: 5px;">
                                <el-carousel height="300px" style="border-radius: 10px;">
                                    <el-carousel-item v-for="item in carouselData3">
                                        <img style="width: 100%;height: 300px;border-radius: 10px;" :src="item" alt="">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </div>
                    </div>
                    <div
                        style="flex: 3;height: 730px; background-color: #F3F3F3FF;margin-top: 15px;border-radius: 10px;margin-left: 10px;">
                        <div style="text-align: center;margin-top: 30px;">
                            <img :src="user.avatar" alt="" style="width: 130px;height: 130px;border-radius: 50%;">
                            <div style="margin-top: 10px;font-size: 20px;">Hi,&nbsp;{{ user.name }}</div>
                        </div>
                        <div style="margin-top: 20px;padding: 0 15px;">
                            <img src="/src/assets/img/lanzi.jpg" alt=""
                                style="height: 250px;width: 100%;border-radius: 20px;">
                        </div>
                        <div style="display: flex; margin: 20px 10px 10px 10px;width: 470px;white-space: nowrap;">
                            <div style="margin-top: 3px;">
                                <el-icon :size="25">
                                    <Bell />
                                </el-icon>
                            </div>
                            <div>
                                <span style="font-weight: bold;font-size: 20px;">公告</span>
                            </div>
                            <div style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">
                                <span style="color: #666666;font-size: 20px;">：{{ content }}</span>
                            </div>
                        </div>
                        <div style="display: flex;margin-top: 50px;">
                            <div style="flex: 1;text-align: center;">
                                <a href="javascript:void(0)" @click="navGo('/Collect')">
                                    <img src="/src/assets/img/shoucang.png" alt="" style="height: 40px;width: 40px;">
                                    <div>我的收藏</div>
                                </a>
                            </div>
                            <div style="flex: 1;text-align: center;">
                                <a href="javascript:void(0)" @click="navGo('/Address')">
                                    <img src="/src/assets/img/dianpu.png" alt="" style="height: 40px;width: 40px;">
                                    <div>我的地址</div>
                                </a>
                            </div>
                            <div style="flex: 1;text-align: center;">
                                <a href="javascript:void(0)" @click="navGo('/Shop')">
                                    <img src="/src/assets/img/gouwuche.png" alt="" style="height: 40px;width: 40px;">
                                <div>我的购物车</div>
                                </a>
                            </div>
                            <div style="flex: 1;text-align: center;">
                                <a href="javascript:void(0)" @click="navGo('/Order')">
                                    <img src="/src/assets/img/dingdan.png" alt="" style="height: 40px;width: 40px;">
                                <div>我的订单</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    style="margin: 30px 0 0 30px;height: 60px;background-color: #04BF04FF;font-size: 30px;color: white;width: 170px;font-weight: bold;line-height: 56px;text-align: center;border-radius: 20px;">
                    热卖商品</div>
                <div style="margin-left: 5px;margin-top: 10px;">
                    <el-row>
                        <el-col :span="5" v-for="item in GoodsData">
                            <img @click="navGo('/GoodsInfo?id=' + item.id)" :src="item.img"
                                style="width: 100%;height: 275px;border-radius: 10px;border: #cccccc 1px solid;" alt="">
                            <div
                                style="margin-top: 10px;font-weight: bold;font-size: 20px;width: 310px;color: #000000FF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                                {{ item.name }}</div>
                            <div style="margin-top: 5px;font-size: 24px;color:#FF5000FF">￥{{ item.price }}/件</div>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<script>
import { getAll, getTop } from "../../api/index"
import CommonHeader from "../../components/MallHeader.vue"
export default {
    data() {
        return {
            typeData: [],
            GoodsData: [],
            noticeData: [],
            content: "",
            user: JSON.parse(localStorage.getItem("user")),
            carouselData1: ["/src/assets/img/1.jpg", "/src/assets/img/2.jpg", "/src/assets/img/3.jpg"],
            carouselData2: ["/src/assets/img/4.png", "/src/assets/img/5.jpg", "/src/assets/img/6.jpg"],
            carouselData3: ["/src/assets/img/7.png", "/src/assets/img/8.png", "/src/assets/img/9.png"]
        }
    },
    created() {
        this.loadTypeData();
        this.loalNotice();
        this.loadGoods();
    },
    components: {
        CommonHeader
    },
    methods: {
        loadGoods() {
            getTop("goods").then(res => {
                if (res.code === 200) {
                    this.GoodsData = res.data
                } else {
                    this.$message(res.message);
                }
            }, reason => {
                this.$message(reason)
            })
        },
        loadTypeData() {
            getAll("type").then(res => {
                if (res.code === 200) {
                    this.typeData = res.data
                    console.log(this.typeData);
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        loalNotice() {
            getAll("notice").then(res => {
                this.noticeData = res.data
                let i = 0
                if (this.noticeData && this.noticeData.length) {
                    this.content = this.noticeData[0].content
                    setInterval(() => {
                        this.content = this.noticeData[i].content
                        i++
                        if (i == this.noticeData.length) {
                            i = 0
                        }
                    }, 2500);
                }
            })
        },
        navGo(url) {
            this.$router.push(url);
        }
    }
}

</script>

<style scoped>
.main-content {
    min-height: 100vh;
    background-size: 100%;
    background-image: url("../../assets/img/未标题-1.jpg");
    background-repeat: no-repeat;
}

.left {
    width: 5%;
    background-repeat: no-repeat;
}

.right {
    width: 5%;
    background-repeat: no-repeat;
}

.el-col-5 {
    width: 20%;
    max-width: 20%;
    padding: 10px 10px;
}

a:hover {
    color: red;
}

a {
    text-decoration: none;
    color: #666666
}
</style>